<template>
  <el-dialog
    :title="form._id ? '修改项目' : '创建项目'"
    :visible.sync="dialogVisible"
    width="500px">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <name-input v-model="form.name" label="项目名称"/>
      <description-input v-model="form.description" label="项目描述"/>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" :loading="loading" type="primary" @click="okClick">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'
  import { Form } from 'element-ui'
  import WPopView from '@/utils/popView'
  import ArticleModel from '@/models/ArticleModel'
  import { DescriptionInput, NameRule, NameInput } from '@/components/global/input'

  @Component({
    name: 'AddArticle',
    components: {
      DescriptionInput,
      NameInput
    }
  })
  export default class ChangePassword extends Vue{

    private dialogVisible = false
    private loading = false

    form: ArticleModel = new ArticleModel()

    rules = {
      name: NameRule
    }

    /**
     * 显示
     */
    private show(souce: ArticleModel){
      this.dialogVisible = true;
      this.form = new ArticleModel()
      this.form.setDataWithJson(souce);
    }

    private okClick() {
      (this.$refs.form as Form).validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.form._id) {
            this.form.update(this.form).then(() => {
              WPopView.msgSuccess('更新成功')
              this.dialogVisible = false
              this.$emit('reload')
            }).finally(() => {
              this.loading = false
            })
          } else {
            this.form.addModel().then(() => {
              WPopView.msgSuccess('添加成功')
              this.dialogVisible = false
              this.$emit('reload')
            }).finally(() => {
              this.loading = false
            })
          }
        } else {
          return false;
        }
      });
    }
  }

</script>

<style scoped>

</style>
